<template>
	<div class="system-resource-container layout-padding">
		<el-row :gutter="8" style="width: 100%;height:100%;">
			<el-col :span="4" :xs="24">
				<FloorTree ref="floorTreeRef" @node-click="nodeClick" />
			</el-col>
			<el-col :span="20" :xs="24">
				<el-card shadow="hover" style="padding-bottom:0px;" :body-style="{ paddingBottom: '0' }">
					<el-form ref="queryForm" :inline="true">
						<el-form-item label="关键字">
							<el-input v-model="state.queryParams.searchKey" clearable="" placeholder="请输入模糊查询关键字" />
						</el-form-item>
						<el-form-item>
							<el-button-group>
								<el-button type="primary" icon="ele-Search" @click="handleQuery"> 查询 </el-button>
								<el-button icon="ele-Refresh" @click="resetQuery"> 重置 </el-button>
							</el-button-group>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" icon="ele-Plus" @click="openAddHousing('add')"> 新增住房 </el-button>
						</el-form-item>
					</el-form>
				</el-card>

				<el-card class="full-table" shadow="hover" style="margin-top: 8px;height:auto; padding:0">
					<el-table :data="state.housingData" style="width: 100%;" v-loading="state.loading" border>
						<el-table-column type="index" label="序号" width="55" align="center" fixed="left" />
						<el-table-column prop="villageName" label="小区" width="120" show-overflow-tooltip />
						<el-table-column prop="floorTitle" label="层级" width="200" show-overflow-tooltip />
						<el-table-column prop="roomNo" label="房间编号" width="120" show-overflow-tooltip />
						<el-table-column prop="roomArea" width="120" label="住房面积" show-overflow-tooltip />
						<el-table-column prop="baseRent" width="120" label="基础租金" show-overflow-tooltip />
						<el-table-column prop="monthlyRent" width="120" label="月租金" show-overflow-tooltip />
						<el-table-column prop="tBMonthlyRent" width="120" label="停保月租金" show-overflow-tooltip />
						<el-table-column prop="rentingOffice" width="120" label="配租办公室" show-overflow-tooltip />
						<el-table-column prop="rentType" width="120" label="房屋类型" show-overflow-tooltip>
							<template #default="scope">
								<el-tag type="info" v-if="scope.row.rentType === 0">廉租房</el-tag>
								<el-tag v-else-if="scope.row.type === 2">政企合建廉租房</el-tag>
								<el-tag v-else-if="scope.row.type === 3">经济适用房</el-tag>
								<el-tag v-else-if="scope.row.type === 4">公租房【计划内】</el-tag>
								<el-tag v-else-if="scope.row.type === 5">公租房【计划外】</el-tag>
								<el-tag type="info" v-else>未知</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="remarks" width="150" label="备注" show-overflow-tooltip />
						<el-table-column type="expand" fixed="left">
						<template #default="props">
							<el-descriptions title="" :data="props.row" :column="4" border>
								<el-descriptions-item label="公摊系数" label-align="right" align="center" width="150px">
								{{props.row.publicRatio}}
								</el-descriptions-item>
								<el-descriptions-item label="公摊面积" label-align="right" align="center"  width="150px">
								{{props.row.publicArea}}
								</el-descriptions-item>
								<el-descriptions-item label="建筑面积" label-align="right" align="center" width="150px">
								{{props.row.buildingArea}}
								</el-descriptions-item>
								<el-descriptions-item label="结构系数" label-align="right" align="center" width="150px">
								{{props.row.structureRatio}}
								</el-descriptions-item>
								<el-descriptions-item label="配套系数" label-align="right" align="center" width="150px">
								{{props.row.matchingRatio}}
								</el-descriptions-item>
								<el-descriptions-item label="区位系数" label-align="right" align="center"  width="150px">
								{{props.row.locationRatio}}
								</el-descriptions-item>
								<el-descriptions-item label="楼层系数" label-align="right" align="center"  width="150px">
								{{props.row.floorRatio}}
								</el-descriptions-item>
								<el-descriptions-item label="停保系数" label-align="right" align="center"  width="150px">
								{{props.row.tBRatio}}
								</el-descriptions-item>
								<el-descriptions-item label="状态" label-align="right" align="center" width="150px">
								{{props.row.rState}}
								</el-descriptions-item>
								<el-descriptions-item label="房屋用途" label-align="right" align="center"  width="150px">
								{{props.row.roomUse}}
								</el-descriptions-item>
								<el-descriptions-item label="房屋性质" label-align="right" align="center"  width="150px">
								{{props.row.roomNature}}
								</el-descriptions-item>
								<el-descriptions-item label="房屋状态" label-align="right" align="center" width="150px">
								{{props.row.roomState}}
								</el-descriptions-item>
							</el-descriptions>
						</template>
						</el-table-column>
						<el-table-column label="操作" width="140" align="center" fixed="right" show-overflow-tooltip>
							<template #default="scope">
								<el-button icon="ele-Edit" size="small" text="" type="primary"
									@click="openEditHousing(scope.row)" v-auth="'housingEntity:update'"> 编辑
								</el-button>
								<el-button icon="ele-Delete" size="small" text="" type="primary"
									@click="delHousing(scope.row)" v-auth="'housingEntity:delete'"> 删除
								</el-button>
							</template>
						</el-table-column>

						<!-- <el-table-column prop="publicRatio" width="120" label="公摊系数" show-overflow-tooltip />
						<el-table-column prop="publicArea" width="120" label="公摊面积" show-overflow-tooltip />
						<el-table-column prop="buildingArea" width="120" label="建筑面积" show-overflow-tooltip />
						<el-table-column prop="structureRatio" width="120" label="结构系数" show-overflow-tooltip />
						<el-table-column prop="matchingRatio" width="120" label="配套系数" show-overflow-tooltip />
						<el-table-column prop="locationRatio" width="120" label="区位系数" show-overflow-tooltip />
						<el-table-column prop="floorRatio" width="120" label="楼层系数" show-overflow-tooltip />
						<el-table-column prop="rState" width="120" label="状态" show-overflow-tooltip />
						<el-table-column prop="roomUse" width="120" label="房屋用途" show-overflow-tooltip />
						<el-table-column prop="roomNature" width="120" label="房屋性质" show-overflow-tooltip />
						<el-table-column prop="roomState" width="120" label="房屋状态" show-overflow-tooltip /> -->
					</el-table>
					<el-pagination v-model:currentPage="state.queryParams.pageIndex"
						v-model:page-size="state.queryParams.pageSize" :total="state.total"
						:page-sizes="[10, 20, 50, 100]" small background @size-change="handleSizeChange"
						@current-change="handleCurrentChange" layout="total, sizes, prev, pager, next, jumper" />
				</el-card>
			</el-col>
		</el-row>
		<EditHousing ref="housingRef" :title="state.editHousingTitle" :floorTitle="state.selectData.title" @handleQuery="handleQuery" />
		<!-- <EditUser ref="editUserRef" :title="state.editUserTitle" :orgData="state.orgTreeData" @handleQuery="handleQuery" />
    <EditVillage ref="editVillageRef" :title="state.editVillageTitle" @handleQuery="handleQuery" /> -->
	</div>
</template>
  
  <script lang="ts" setup name="systemUser">
	import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
	import { ElMessageBox, ElMessage } from 'element-plus';
	import { formatDate } from '/@/utils/formatTime';
	import { HousingItem, HousingForm } from '/@/api/housing';
    import { useHousingApi } from '/@/api/housing';
	// import { auth } from '/@/utils/authFunction';
	// import FloorTree from '/@/views/main/house/floorTree.vue';
	// import EditUser from '/@/views/system/user/component/editUser.vue';

	// import { getAPI } from '/@/utils/axios-utils';
	// import { SysUserApi, SysOrgApi } from '/@/api-services/api';
	// import { SysUser, SysOrg } from '/@/api-services/models';
  //import { useUserApi } from '/@/api/user';
//   import { useResourceApi } from '/@/api/resource';

	// 引入组件
  const FloorTree = defineAsyncComponent(() => import('/@/views/main/house/floorTree.vue'));
  const EditHousing = defineAsyncComponent(() => import('/@/views/main/house/component/editHousingDialog.vue'));
  //const EditUser = defineAsyncComponent(() => import('/@/views/system/user/dialog.vue'));
//   const EditVillage = defineAsyncComponent(() => import('/@/views/main/house/component/editDialog.vue'));

	const floorTreeRef = ref<InstanceType<typeof FloorTree>>();
	const housingRef = ref<InstanceType<typeof EditHousing>>();
	// const editVillageRef = ref<InstanceType<typeof EditVillage>>();
	const state = reactive({
      housingData: [] as Array<HousingItem>,
	//   floorTitle:'',
	//   isLeaf:false,
      queryParams: {
		villageId:0,
        floorId: 0,
		rentType:-1,
		searchKey: '',
        pageIndex: 1,
        pageSize: 20
      },
	  selectData:{},
	// 	id:0,
	// 	name:'',
	// 	pId:0,
	// 	vId:0,
	// 	vName:'',
	// 	code:1,
	// 	desc:'',
	// 	title:'',
	// 	isLeaf:false,
	// 	dataType:1,
	// 	rentType:-1,
	// 	chdcount:0
	//   },
      total: 0,
      loading: false,
	  editVillageTitle: '',
	  editFloorTitle: '',
	  editHousingTitle: '',
	});

	onMounted(async () => {
		loadOrgData();
		//handleQuery();
	});

	// 查询机构数据
	const loadOrgData = async () => {
		state.loading = true;
		// useOrgApi().getOrgList().then(async (res:AjaxResult) => {
		// const _data: Array<OrgItem> = res.data;
		// state.orgTreeData = _data;
		// });
		state.loading = false;
	};

	// 查询操作
	const handleQuery = async () => {
		state.loading = true;

		await useHousingApi().getHousingTreeList(state.queryParams).then(async (res: AjaxResult) => {
		const _data: Array<HousingForm> = res.data.items;
		state.housingData = _data;
		state.total = res.data?.total;
		});
		setTimeout(() => {
			state.loading = false;
		}, 500);
	};

	// 重置操作
	const resetQuery = () => {
		// state.userTableData.queryParams.orgId = 0;
		// state.userTableData.queryParams.search = '';
		handleQuery();
	};

	// 打开新增页面
	const openAddHousing = (type:string) => {
		console.log('selectData:'+JSON.stringify(state.selectData));
		console.log('id:	'+state.selectData.id+'	floorId:'+state.queryParams.floorId+'	:'+state.selectData.isLeaf);
		if(state.selectData.id>0 && state.selectData.isLeaf==true){
			state.editHousingTitle = '添加住房信息';
			const _row : HousingForm = { "id": 0,"villageId":state.selectData.vId,"floorId":state.selectData.id,"rentType":state.selectData.rentType }
			console.log('housing:'+_row);
			housingRef.value?.openDialog(type,_row);
		}
		else{
			ElMessage.error('请选择最末[叶子]层级');
		}
	};

	// 打开编辑页面
	const openEditHousing = (row: HousingItem) => {
		state.editHousingTitle = '编辑账号';
		housingRef.value?.openDialog('edit',row);
		// editVillageRef.value?.openDialog(type, row);
	};

	// 删除
	const delHousing = (row: HousingForm) => {
		ElMessageBox.confirm(`确定删除账号：【${row.account}】?`, '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
		})
		.then(async () => {
			// await useUserApi().delUser() getAPI(SysUserApi).apiSysUserDeletePost({ id: row.id });
			// await useUserApi().userDelete({ id: row.id }).then(async (res:AjaxResult) =>{
			// 	handleQuery();
				ElMessage.success('删除成功~哦！');
			// });
		})
		.catch(() => {});
	};

	// 改变页面容量
	const handleSizeChange = (pagesize: number) => {
		state.queryParams.pageSize = pagesize;
		handleQuery();
	};

	// 改变页码序号
	const handleCurrentChange = (pageindex: number) => {
		state.queryParams.pageIndex = pageindex;
		handleQuery();
	};

	// // 修改状态
	// const changeStatus = async (row: any) => {
	// 	// await useUserApi().SetStatus({ id: row.id, status: row.status })
	// 	// .then(async (res:AjaxResult) => {
	// 	// 	ElMessage.success('账号状态设置成功');
	// 	// })
	// 	// .catch(() => {
	// 	// 	row.status = row.status == 1 ? 2 : 1;
	// 	// });
	// };

	// 树组件点击
	const nodeClick = async (node: any) => {
		state.queryParams.floorId = node.id;
		state.queryParams.villageId = node.vId;
		state.queryParams.rentType = node.rentType;
		// state.floorTitle = node.title;
		// state.isLeaf = node.isLeaf;
		// state.userTableData.queryParams.orgId = node.id;
		// state.queryParams.account = undefined;
		// state.queryParams.realName = undefined;
		// state.queryParams.phone = undefined;
		state.selectData = node;
		//console.log('c-node:'+JSON.stringify(node));
		//console.log('selectData:'+JSON.stringify(state.selectData));
		handleQuery();
	};
	</script>

	<style scoped lang="scss">
	.system-resource-container {
		overflow-y:auto;
		:deep(.el-card__body) {
			//padding:5px;
			// display: flex;
			// flex-direction: column;
			// flex: 1;
			// overflow: auto;
			// .el-table {
			// 	flex: 1;
			// }
		}
		.full-table{
			:deep(.el-card__body) {
				padding:8px;
			}
			// .el-card {
			// 	--el-card-padding: 5px;
			// 	.el-card__body{
			// 		padding:5px;
			// 	}
			// }
			// .el-card__body {
			// 	padding: 5px;
			// }
		}
		.system-resource-padding {
			padding: 15px;
			.el-table {
				flex: 1;
			}
		}
		.el-pagination
		{
			float: right;
			margin: 10px 0 !important;
		}
	}
	</style>
